import type { BaiduElements } from '../../../../../../../../types/constants'
import { ThemeVarService } from '../../../../../../../../lib/abstract/style/theme_var/service'
import { ICON_IDS } from '../../../../../../../../lib/icons/types/constants'
import { PAGE_ELEMENTS, SUPPORTED_PLATFORMS } from '../../../../../../../../types/constants'
import { StylesService } from '../../../../../../../../types/constants/styles'
import { SearchCommonStyles } from '../../common'

export class BaiduVideoPage {
  elements: BaiduElements = PAGE_ELEMENTS[SUPPORTED_PLATFORMS.BAI_DU]
  private static instance: BaiduVideoPage
  private readonly themeVarService: ThemeVarService = ThemeVarService.getInstance()
  private readonly stylesService: StylesService = StylesService.getInstance()
  private readonly searchCommonStyles: SearchCommonStyles = SearchCommonStyles.getInstance()

  /**
   * 获取单例实例
   */
  public static getInstance(): BaiduVideoPage {
    if (!BaiduVideoPage.instance) {
      BaiduVideoPage.instance = new BaiduVideoPage()
    }
    return BaiduVideoPage.instance
  }

  init(): void {
  }

  /**
   * 无搜索结果样式
   */
  noSearchResult(): string {
    return `
  #container:has(#noresult) {
    width: fit-content !important;
    
    #header_top_bar {
      span {
        color: var(${this.themeVarService.search.default.text}) !important;
      }
    }
    
    #content_left {
      #noresult {
        color: var(${this.themeVarService.search.default.text}) !important;
        
        p {
          color: var(${this.themeVarService.search.default.text}) !important;
        }
      }
    }
  }
`
  }

  getMainStyles(): string {
    return `
  #head {
    padding: 10px !important;
    
    #kw {
      background: #ffffff !important;
    }
    
    #u {
      .lb {
        color: var(${this.themeVarService.search.default.text}) !important;
        
        &:hover {
          color: var(${this.themeVarService.link.default.text}) !important;
        }
      }
    }
  }    
  
  /* 无搜索结果样式 */
  ${this.noSearchResult()}
  
  /* 有搜索结果样式 */    
  #container:not(:has(#noresult)) {
    left: 0 !important;
    width: 100% !important;

    #content_left {
      width: 100% !important;
      padding: 0 !important;

      /* 搜索结果列表 */
      .video_list_container {
        ${this.searchCommonStyles.resultContainerStyles({ columns: 4 })}
        position: relative;
        
        /* 加载更多 */
        .video_load_more {
          ${this.searchCommonStyles.resultOtherStyles()}
          
          .video_noMoreResult {
            margin-left: 0 !important;
          }
        }

        /* 搜索结果项 */
        .video_list {
          ${this.searchCommonStyles.resultItemStyles({ setPadding: false, overflowHide: false })}
          display: flex !important;
          flex-direction: column !important;
          margin: 0 0 5px 0 !important;
          padding: 20px !important;
          min-width: 300px !important;
          max-width: 400px !important;
          
          > a {
            width: auto !important;
            height: auto !important;
            border-radius: 0 !important;
            
            &.small_img_con {
              background: none !important;
            }
            
            .c-img {
              height: 250px !important;
              
              img {
                border-radius: 0 !important;
              }
            }
          }

          .video_small_intro {
            margin: 0 !important;
            position: unset !important;
            
            /* 标题 */
            .video-title {
              display: inline-block !important;
              margin: 8px 0 16px 0 !important;
              color: var(${this.themeVarService.link.default.text}) !important;
              
              &:hover {
                color: var(${this.themeVarService.link.default.textHover}) !important;
                text-decoration: none !important;
              }
            }
            
            > div {
              white-space: nowrap !important;
            }
            
            > div:not(:has(.wetSource)) {
              padding-bottom: 10px !important;
              color: var(${this.themeVarService.search.default.text}) !important;
            }
            
            > div:has(.wetSource) {
              position: absolute !important;
              display: flex !important;
              align-items: center !important;
              justify-content: space-between !important;
              bottom: 5px !important;
              left: 0 !important;
              width: 100% !important;
              color: #666 !important;
              
              .video-source,
              .release-time {
                display: inline-flex !important;
                align-items: center;
                
                &::before {
                  ${this.stylesService.inlinePseudo.icon()}
                }
              }
              
              .wetSource, .video-source {
                padding-left: 10px !important;
              }
              
              span:not(.wetSource), .release-time {
                padding-right: 10px !important;
                
                &::before {
                  background-image: var(${this.themeVarService.generateIcon(ICON_IDS.time.clock)}) !important;
                }
              }
            }
          }
        }
      }
    }
  }
`
  }
}
